<template>
  <uni-popup ref="alertDialog" @change="dialogChange" :maskClick="false">
    <view class="dialog" :style="[style]">
      <view class="dialog-header">
        <slot name="title">
          <view class="dialog-header-title">{{ currentOptions.title }}</view>
        </slot>
        <view class="dialog-header-close" @click="dialogClose(currentOptions)" v-if="showClose">
          <u-icon name="close" size="36rpx"></u-icon>
        </view>
      </view>
      <view class="dialog-body">
        <slot name="content">
          <view class="dialog-body-content">{{ currentOptions.content }}</view>
        </slot>
      </view>
      <view class="dialog-footer">
        <slot name="footer">
          <view class="dialog-footer-btn-group">
            <button class="dialog-footer-btn dialog-footer-btn--cancel" @click="dialogClose(currentOptions)" v-if="currentOptions.showCancel">
              {{ currentOptions.cancelText || '取消' }}
            </button>
            <button class="dialog-footer-btn dialog-footer-btn--confirm" @click="dialogConfirm(currentOptions)" v-if="currentOptions.showConfirm">
              {{ currentOptions.confirmText || '确定' }}
            </button>
          </view>
        </slot>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import {debounce} from "@/utils/common";

export default {
  name: "hxk-dialog",
  options: {
    styleIsolation: 'shared' // 解除样式隔离
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "提示"
    },
    content: {
      type: String,
      default: "内容"
    },
    //长度
    width: {
      type: [String, Number],
      default: "685"
    },
    //圆角
    round: {
      type: [String, Number],
      default: "22"
    },
    //位置
    position: {
      type: String,
      default: "center"
    },
    showClose: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    showConfirm: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 弹窗配置
      options: {
        title: "",
        content: "",
        width: "",
        round: "",
        position: "center",
        showClose: true,
        showCancel: true,
        showConfirm: true,
        onConfirm: null,
        onCancel: null
      }
    }
  },
  computed: {
    // 弹窗默认配置
    defaultOptions: {
      get() {
        return {
          title: this.title ? this.title : "提示",
          content: this.content ? this.content : "",
          width: this.width ? this.width : "685",
          round: this.round ? this.round : "22",
          position: this.position ? this.position : "center",
          showClose: this.showClose ? this.showClose : true,
          showCancel: this.showCancel ? this.showCancel : true,
          showConfirm: this.showConfirm ? this.showConfirm : true,
          onConfirm: null,
          onCancel: null
        }
      },
      set(val) {
        console.log("options", val)
      }
    },
    // 弹窗配置
    currentOptions: {
      get() {
        let options = Object.assign({}, this.defaultOptions, this.options)
        console.log("currentOptions", options)
        return options
      },
      set(val) {
        this.options = val
      }
    },
    // 判断是否为带长度单位的字符串
    isWidthUnit() {
      return /^\d+(\.\d+)?(px|rpx|rem|em|vw|vh|vmin|vmax|%)$/.test(this.width)
    },
    // 返回对应变量单位的值，带单位返回原值，不带单位返回rpx单位的值
    getNumberWithUnit() {
      return (value) => {
        if (typeof value === "number") {
          return value + "rpx"
        } else {
          if (this.isWidthUnit) {
            return value
          } else {
            return value + "rpx"
          }
        }
      }

    },
    style: {
      get() {
        let style = {
          width: this.getNumberWithUnit(this.currentOptions.width),
          height: "auto",
          background: "#fff",
          borderRadius: this.getNumberWithUnit(this.currentOptions.round)
        }
        if(this.currentOptions.position === "bottom"){
          style.width = "100%"
          style.borderRadius= `${this.getNumberWithUnit(this.currentOptions.round)} ${this.getNumberWithUnit(this.currentOptions.round)} 0 0`
        }
        return style
      },
      set(val) {
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show()
      }
    }
  },
  mounted() {
  },
  methods: {
    dialogChange(val) {
      this.$emit("update:visible", val.show)
    },
    // 显示弹窗
    show() {
      this.$refs.alertDialog.open(this.currentOptions.position)
    },
    // 隐藏弹窗
    hide(){
      this.$refs.alertDialog.close()
    },
    // 关闭/取消按钮点击事件
    dialogClose(options) {
      if (options.onCancel && typeof options.onCancel === "function") {
        options.onCancel()
      } else {
        this.$emit("update:visible", false)
        this.$emit("cancel")
      }
      this.$refs.alertDialog.close()

    },
    // 确认按钮点击事件
    dialogConfirm(options) {
      if (options.onConfirm && typeof options.onConfirm === "function") {
        // options.onConfirm()
        debounce(options.onConfirm(), 500, true)
      } else {
        this.$emit("confirm")
        this.$refs.alertDialog.close()
      }
    },
    // 自定义confirm方法
    confirm(options) {
      if (options) {
        this.options = Object.assign({}, options)
      }
      console.log('this.options', this.options)
      this.show()
    }
  }

}
</script>

<style scoped lang="scss">
.dialog {
  position: relative;
  padding: 40rpx 30rpx 30rpx 30rpx;

  .dialog-header {
    position: relative;
    margin-bottom: 30rpx;

    .dialog-header-title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 28rpx;
      font-weight: 600;
      font-size: 32rpx;
      color: #000000;
      line-height: 28rpx;
    }

    .dialog-header-close {
      position: absolute;
      top: 0;
      right: 0;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      background: #E4E7ED;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #BEBEBE;
      font-size: 28rpx;
      cursor: pointer;
      transform: translate(0, -50%);
    }
  }

  .dialog-body {
    margin-bottom: 50rpx;

    .dialog-body-content {
      font-size: 30rpx;
      color: #232323;
      text-align: center;
    }
  }

  .dialog-footer {
    .dialog-footer-btn-group {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .dialog-footer-btn {
        flex: 1;
        width: 249rpx;
        height: 73rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        font-size: 30rpx;
        margin-right: 20rpx;
        &:last-child {
          margin-right: 0;
        }

        &--confirm {
          background-color: $hxk-primary-color;
          color: #fff;
          border: 1rpx solid $hxk-primary-color;
        }

        &--cancel {
          border: 1rpx solid #BEBEBE;
          background-color: #fff;
          color: #727272;
        }
      }
    }


  }
}

::v-deep .uni-popup {
  z-index: 999999 !important;
}

</style>
